<template>
  <div id="login-account">
    <el-form :model="form" :rules="rules" ref="accountForm" class="demo-ruleForm">
      <el-form-item prop="companynumber">
        <el-input v-model.trim="form.companynumber" @keyup.enter.native="loginAccount()" placeholder="请输入企业号">
          <template #prefix>
            <i class="iconfont icon-shigongdanweisel"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model.trim="form.username" @keyup.enter.native="loginAccount()" placeholder="请输入名称">
          <template #prefix>
            <i class="iconfont icon-bumen"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input id="pwdInput" v-model.trim="form.pwd" @keyup.enter.native="loginAccount()" placeholder="请输入登录密码" :type="isPwd ? 'password' : 'text'">
          <template #prefix>
            <i class="iconfont icon-lock"></i>
          </template>
          <template #suffix>
            <i v-if="!isPwd" style="cursor: pointer" class="iconfont" @click="isPwd = true">&#xe67d;</i>
            <i v-if="isPwd" style="cursor: pointer" class="iconfont" @click="isPwd = false">&#xe67e;</i>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <captcha-account ref="captchaAccount" />
    <div class="login-btn" :style="!isTop ? 'margin-top:35px' : ''">
      <el-button class="btn" @click="loginAccount()" :loading="loading" type="primary" round>登 录</el-button>
      <span class="cz_span">
        <span @click="onPassword" class="_span hoverToBlue">忘记密码</span>
        <span class="hx">|</span>
        <span @click="onSignup" class="_span hoverToBlue">注册</span>
        <!-- <span class="hx">|</span>
        <span @click="qrCode" class="_span hoverToBlue">扫码登录</span> -->
      </span>
    </div>
  </div>
</template>
<script>
import { rules } from "../config/accountRules";
import md5 from "js-md5";
import { acLoginTrace } from "@/config/config";
import captchaAccount from "./captchaAccount.vue";
export default {
  data() {
    return {
      form: {
        // companynumber: "F0093",
        // username: "admin",
        // pwd: "ydz123456",
      },
      rules: rules,
      loading: false,
      isButton: true, // 二次验证滑块显示为false  滑块滑动完成为true
      isTop: true,
      isPwd: true,
    };
  },
  components: { captchaAccount },
  methods: {
    qrCode() {
      this.$emit("QrCode");
    },
    init() {
      window.nvc.reset();
      sessionStorage.removeItem("nvcVal2");
      this.isButton = true;
    },
    onSignup() {
      this.$emit("signup");
    },
    onPassword() {
      this.$emit("ResetPasswordFun");
    },
    loginAccount(nvcVal2) {
      // if (!nvcVal2 && !this.$refs.captchaAccount.submit()) return;
      // console.log(nvcVal2, window.nvc.getNVCVal(), window.nvc.getNVCVal());
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          // this.companynumber = data.companynumber  //保存企业号 选择体验版本需要使用
          const data = JSON.parse(JSON.stringify(this.form));
          this.$store.dispatch("setPWD", data.pwd); // 存储pwd
          data.pwd = md5(data.pwd);
          this.loading = true;
          // window.nvc.getNVCVal(); //第一次无痕验证主动获取的人机信息串
          const machineVal = nvcVal2 || window.nvc.getNVCVal() || "";
          this.$api.publicApi
            .LoginNonTrace({
              ...data,
              machineVal,
              ...acLoginTrace,
            })
            .then((res) => {
              if (res.data.status == 204) {
                //登录失败
                this.init();
                this.$message({ message: res.data.message, type: "warning" });
              }
              this.$emit("accountLoginSuccess", res.data);
              // this.$refs.captchaAccount.verify({ data: res.data }, () => {
              //   this.$emit('accountLoginSuccess', res.data);
              // });

              this.loading = false;
            })
            .catch((err) => {
              console.log(err, "err");
              if (err.data.status == "424") {
                this.$emit("expire", {
                  isExpire: true,
                  companynumber: this.form.companynumber,
                  versionTypeDesc: err.data.data,
                });
              }
              window?.nvc?.reset();
              this.loading = false;
            });
        } else {
          setTimeout(() => {
            var isError = document.getElementsByClassName("is-error");
            isError[0].querySelector("input").focus();
          }, 1);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nc_scale {
  background: #e8e8e8 !important;
}
:deep(.nc_scale div.nc_bg) {
  background: #7ac23c !important;
}
.nc_scale .scale_text2 {
  color: #fff !important;
}
.nc_scale span {
  border: 1px solid #ccc !important;
}
.errloading {
  border: #faf1d5 1px solid !important;
  color: #ef9f06 !important;
}
#login-account {
  #captcha-account {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .el-form-item {
    margin-top: 10%;
  }
  .login-btn {
    width: 100%;
    margin-bottom: 50px;
    text-align: left;
    // padding-left: 30px;
    .btn {
      width: 35%;
      height: 35px;
      font-size: 13px !important;
      line-height: 12px;
      margin-top: 11%;
      border-radius: 2px;
      font-weight: 600;
      transition: none;
    }
    .cz_span {
      float: right;
      margin-top: 11%;
      > span {
        margin-left: 10px;
      }
      .hx {
        color: #ccc;
      }
    }
    :deep(._span) {
      // margin-top: 50px;
      // margin-left: 40px;
      font-size: 13px;
      color: #999;
      &:hover {
        color: #5b95f9;
      }
    }
  }
}
</style>
